<template>
  <div class="main-page">
    <PageSearch
      :search-form-config="searchFormConfig"
      :form-data.sync="formData"
      @searchBtnClick="handleSearch"
    />
    <el-row type="flex" justify="end">
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="medium"
        @click="handleCreateOrder"
      >
        新建公告
      </el-button>
    </el-row>
    <PageContent
      ref="pageContent"
      :form-data="formData"
      :content-table-config="contentConfig"
    >
      <template #status="{ row }">
        <el-tag :type="row.statusValue ==1 ? 'success' : ''">
          {{ row.statusText }}
        </el-tag>
      </template>
      <template #operate="{ row }">
        <el-button
          type="text"
          size="small"
          icon="el-icon-edit"
          @click="handleEdit(row)"
        >
          编辑
        </el-button>
        <el-button
          type="text"
          size="small"
          icon="el-icon-delete"
          class="delete-btn"
          @click="handleDelete(row)"
        >
          删除
        </el-button>
      </template>
    </PageContent>

    <PageModal
      :modal-form-data="modalFormData"
      :modal-form-config="modalFormConfig"
      :visible.sync="dialogVisible"
      title="新建公告"
      :btn-loading="confirmBtnLoading"
      @confirm="handleConfirm"
    />
  </div>
</template>

<script>
import { contentConfig } from "./config/content.config";
import { searchFormConfig } from "./config/search.config";
import { modalFormConfig } from "./config/modal.config";
import { fetchSaveNotice, fetchDeleteNotice } from "@/api/system";
export default {
  name: "SystemNotice",
  data() {
    return {
      contentConfig,
      searchFormConfig,
      modalFormConfig,
      btnLoading: false,
      confirmBtnLoading: false,
      dialogVisible: false,
      formData: {}, // 搜索表单数据
      modalFormData: {
        statusValue: "",
        content: "",
      }, // 模态框表单数据
    };
  },
  methods: {
    handleSearch() {
      this.$refs.pageContent.queryTblMain();
    },
    handleCreateOrder() {
      this.modalFormData = {
        statusValue: "",
        content: "",
      };
      this.dialogVisible = true;
    },
    handleEdit(row) {
      row.statusValue = +row.statusValue;
      this.modalFormData = { ...this.modalFormData, ...row };
      this.dialogVisible = true;
    },
    handleConfirm(data) {
      this.confirmBtnLoading = true;
      const params = { ...this.modalFormData, ...data };
      params.statusText = params.statusValue == 0 ? "未发布" : "已发布";
      fetchSaveNotice(params)
        .then(() => {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.$refs.pageContent.queryTblMain();
        })
        .finally(() => {
          this.confirmBtnLoading = false;
          this.dialogVisible = false;
        });
    },
    handleDelete({ noticeId }) {
      this.$confirm("确认删除该公告吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          fetchDeleteNotice({ id: noticeId }).then(() => {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.$refs.pageContent.queryTblMain();
          });
        })
        .catch(() => {});
    },
  },
};
</script>
